<div class="form-horizontal">
  <ul class="tab-nav">
    <li ng-class="{active: $ctrl.currentTab == 'general'}">
      <a ng-click="$ctrl.changeTab('general')">General</a>
    </li>
    <li ng-class="{active: $ctrl.currentTab == 'format'}">
      <a ng-click="$ctrl.changeTab('format')">Format</a>
    </li>
  </ul>
  <div ng-show="$ctrl.currentTab == 'general'" class="m-t-10 m-b-10">
      <div class="form-group">
          <label class="col-lg-6">Counter Label</label>
          <div class="col-lg-6">
            <input type="text" ng-model="$ctrl.options.counterLabel" placeholder="{{$ctrl.visualizationName}}"
              class="form-control" ng-trim="false">
          </div>
        </div>
    <div class="form-group">
      <label class="col-lg-6">Counter Value Column Name</label>
      <div class="col-lg-6">
        <select ng-options="col.name as col.name for col in $ctrl.data.columns" ng-model="$ctrl.options.counterColName"
          class="form-control" ng-disabled="$ctrl.options.countRow"></select>
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-6">Counter Value Row Number</label>
      <div class="col-lg-6">
        <input type="number" ng-model="$ctrl.options.rowNumber" class="form-control" ng-disabled="$ctrl.options.countRow">
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-6">Target Value Column Name</label>
      <div class="col-lg-6">
        <select ng-options="col.name as col.name for col in $ctrl.data.columns" ng-model="$ctrl.options.targetColName" class="form-control">
          <option value="">No target value</option>
        </select>
      </div>
    </div>
    <div class="form-group" ng-if="$ctrl.options.targetColName">
      <label class="col-lg-6">Target Value Row Number</label>
      <div class="col-lg-6">
        <input type="number" ng-model="$ctrl.options.targetRowNumber" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-6">
        <label>
          <input type="checkbox" ng-model="$ctrl.options.countRow">
          Count Rows
        </label>
      </div>
    </div>
  </div>

  <div ng-show="$ctrl.currentTab == 'format'" class="m-t-10 m-b-10">
    <div class="form-group">
      <label class="col-lg-6">Formatting Decimal Place</label>
      <div class="col-lg-6">
        <input type="number" ng-model="$ctrl.options.stringDecimal" class="form-control" ng-disabled="!$ctrl.isValueNumber()">
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-6">Formatting Decimal Character</label>
      <div class="col-lg-6">
        <input type="text" ng-model="$ctrl.options.stringDecChar" class="form-control" ng-disabled="!$ctrl.isValueNumber()">
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-6">Formatting Thousands Separator</label>
      <div class="col-lg-6">
        <input type="text" ng-model="$ctrl.options.stringThouSep" class="form-control" ng-disabled="!$ctrl.isValueNumber()" ng-trim="false">
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-6">Formatting String Prefix</label>
      <div class="col-lg-6">
        <input type="text" ng-model="$ctrl.options.stringPrefix" class="form-control" ng-disabled="!$ctrl.isValueNumber()" ng-trim="false">
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-6">Formatting String Suffix</label>
      <div class="col-lg-6">
        <input type="text" ng-model="$ctrl.options.stringSuffix" class="form-control" ng-disabled="!$ctrl.isValueNumber()" ng-trim="false">
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-6">
        <label>
          <input type="checkbox" ng-model="$ctrl.options.formatTargetValue">
          Format Target Value
        </label>
      </div>
    </div>
  </div>
</div>
